<template>
  <div class='login'>
    <h1>普通用户登录</h1>
    <div class='account'>
      <el-form :model='ruleForm' :rules='rules' ref='chooseForm'>
        <el-form-item prop='username'>
          <el-input v-model='ruleForm.username' placeholder="请输入用户名">
            <i slot='prefix' class='el-icon-user'></i>
          </el-input>
        </el-form-item>

        <el-form-item prop='password'>
          <el-input  v-model='ruleForm.password' type="password" show-password placeholder="请输入密码">
            <i slot='prefix' class='el-icon-lock'></i>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type='primary' @click='login' style="width:100%">登录</el-button>
        </el-form-item>

        </el-form>
    </div>
    
  </div>
</template>

<script>
export default {
name:'accountlogin',
props:{
  ruleForm:{//表单对象
    type:Object,
    required:true
  },
  rules:{//验证对象
    type:Object,
    required:true
  }
},
methods:{
  login(){
      this.$refs.chooseForm.validate((valid)=>{
        if(valid){
          this.$emit('submit')
        }else{
          this.$emit('errHandle')
        }
      })  
  }
  
}
}
</script>


<style>
.login{
  margin-left: 30px;
  margin-top: 30px;
}
.account{
  width:500px
}

</style>